<template>
    <div>
        <el-dialog
            @close="ConfirmClose"
            :before-close="handleClose"
            title="Add Purchase"
            :visible.sync="visible">


            <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px"
                     label-position="left">
                <el-row type="flex" justify="start" align="top">
                    <el-form-item  label="purchaseId" prop="purchaseId">
                        <el-input v-model="formData.purchaseId" :disabled='true' clearable :style="{width: '100%'}">
                        </el-input>
                    </el-form-item>
                    <el-form-item label-width="150px" label="purchaseName" prop="purchaseName">
                        <el-input v-model="formData.purchaseName" placeholder="Please Enter" clearable
                                  :style="{width: '100%'}"></el-input>
                    </el-form-item>
                </el-row>
                <el-row type="flex" justify="start" align="top">

                    <el-form-item label="Dept" prop="purchaseDept">
                        <el-select v-model="formData.purchaseDept" placeholder="Please Choose" clearable
                                   :style="{width: '100%'}">
                            <el-option v-for="(item, index) in options.purchaseDeptOptions" :key="index" :label="item.label"
                                       :value="item.value" :disabled="item.disabled"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label-width="150px" label="position" prop="purchasePosition">
                        <el-select v-model="formData.purchasePosition" placeholder="Please Choose" clearable
                                   :style="{width: '100%'}">
                            <el-option v-for="(item, index) in options.purchasePositionOptions" :key="index" :label="item.label"
                                       :value="item.value" :disabled="item.disabled"></el-option>
                        </el-select>
                    </el-form-item>
                </el-row>
                <el-row type="flex" justify="start" align="top">
                    <el-form-item label="phone" prop="purchasePhone">
                        <el-input v-model="formData.purchasePhone" placeholder="Please Enter" clearable
                                  :style="{width: '100%'}"></el-input>
                    </el-form-item>
                    <el-form-item label-width="180px" label="purchaseDecision" prop="purchaseDecision">
                        <el-select v-model="formData.purchaseDecision" placeholder="Please Choose" clearable
                                   :style="{width: '100%'}">
                            <el-option v-for="(item, index) in options.purchaseDecisionOptions" :key="index" :label="item.label"
                                       :value="item.value" :disabled="item.disabled"></el-option>
                        </el-select>
                    </el-form-item>
                </el-row>
                <el-row type="flex" justify="start" align="top">
                    <el-form-item label="Effect" prop="purchaseEffect">
                        <el-select v-model="formData.purchaseEffect" placeholder="Please Enter" clearable
                                   :style="{width: '100%'}">
                            <el-option v-for="(item, index) in options.purchaseEffectOptions" :key="index" :label="item.label"
                                       :value="item.value" :disabled="item.disabled"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="accept" prop="purchaseAccept">
                        <el-select v-model="formData.purchaseAccept" placeholder="Please Choose" clearable
                                   :style="{width: '100%'}">
                            <el-option v-for="(item, index) in options.purchaseAcceptOptions" :key="index" :label="item.label"
                                       :value="item.value" :disabled="item.disabled"></el-option>
                        </el-select>
                    </el-form-item>
                </el-row>

            </el-form>
            <div slot="footer">
                <el-button @click="ConfirmClose">Cancel</el-button>
                <el-button type="primary" @click="handleConfirm">Confirm</el-button>
            </div>

        </el-dialog>
    </div>

</template>

<script>
export default {
    name: "AddPurchaseDialog",
    props: ['visible','close', 'callback','options',],

    data() {
        return {
            formData: {
                "purchaseId": null,
                "purchaseName": null,
                "purchaseDept": null,
                "purchasePosition": null,
                "purchasePhone": null,
                "purchaseDecision": null,
                "purchaseEffect": null,
                "purchaseAccept": null
            },
            rules: {
                chanceName: [{
                    required: true,
                    message: '',
                    trigger: 'blur'
                }],
                purchaseName: [{
                    required: true,
                    message: 'Please Enter',
                    trigger: 'blur'
                }],
                purchaseDept: [{
                    required: true,
                    message: 'Please Enter',
                    trigger: 'blur'
                }],
                purchasePosition: [{
                    required: true,
                    message: 'Please Enter',
                    trigger: 'blur'
                }],
                purchasePhone: [{
                    required: true,
                    message: 'Please Enter',
                    trigger: 'blur'
                }],
                purchaseDecision: [{
                    required: true,
                    message: 'Please Choose',
                    trigger: 'change'
                }],
                purchaseEffect: [{
                    required: true,
                    message: 'Please Choose',
                    trigger: 'change'
                }],
                purchaseAccept: [{
                    required: true,
                    message: 'Please Enter',
                    trigger: 'change'
                }],
            },


        }
    },
    methods: {

        //弹窗关闭
        handleClose(done) {
            this.$confirm('Closing now will lose all unsaved data. Confirm closing?',{cancelButtonText:"cancel",confirmButtonText:"comfirm"})
                // eslint-disable-next-line no-unused-vars
                .then(e => {
                    done();
                })
        },
        ConfirmClose() {
            this.$refs['elForm'].resetFields();
            this.close()
        },

        handleConfirm() {
            this.$refs['elForm'].validate(valid => {
                if (!valid) return

                console.log('before close', this.formData);
                //深拷贝
                const dd = JSON.parse(JSON.stringify(this.formData))
                this.callback(dd);


                this.$message({
                    message: "purchase add successfully!",
                    type: "success",
                });

                this.ConfirmClose();

            })
        },





    }


}
</script>

<style scoped>

</style>